<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用 key 管理可复用的元素2</title>
		<script src="vue.js" ></script>
	</head>
	<body>
		<div id="no-key-example" class="demo">
			<template v-if="loginType === 'username'">
			  <label>Username</label>
			  <input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address" key="email-input">
			</template>
			<button v-on:click="toggleLoginType()">Toggle login type</button>
		</div>
		<script type="text/javascript">
			new Vue({
			  el: '#no-key-example',
			  data: {
			    loginType: 'username'
			  },
			  methods: {
			    toggleLoginType: function () {
			      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
			    }
			  }
			})
		</script>
	</body>
</html>
